<template>
  <div class="projectType-container">
    <section class="top">
      <div class="title">
        <PmBreadcrumb />
        <span style="font-weight: 400; font-size: 18px; line-height: 22px"
          >项目角色</span
        >
        <el-icon size="10" style="margin: 0 6px"><ArrowRight /></el-icon>
        <span>{{ route.query.name }}</span>
      </div>
      <div style="display: flex; gap: 12px"></div>
    </section>
    <div class="roleSetContainer">
      <div class="topContent">
        <div class="roleName">
          <div class="nameShow" style="display: flex; align-items: center">
            <img class="avatar" src="@/assets/pm/roleAvatar.svg" />
            <span class="name">{{ roleDetail?.name?.zh_CN }}</span>
            <img
              @click="handleShowEdit"
              class="editIcon"
              src="@/assets/pm/edit.svg"
            />
          </div>
          <div v-show="showEditName" class="editName">
            <el-input
              style="margin-right: 16px"
              placeholder="请输入角色名称"
              v-model="roleName"
            />
            <el-button @click="handleEditRoleName" type="text">确定</el-button>
            <el-button @click="showEditName = false" type="text"
              >取消</el-button
            >
          </div>
        </div>
        <el-button @click="saveSetting">保存当前配置</el-button>
      </div>

      <div class="label"><span class="line"></span>任务列表权限</div>
      <div class="content">
        <div class="content-title">任务列表数据权限</div>
        <el-checkbox
          v-model="roleCheckPremission.checkAll"
          label="全选"
          :indeterminate="roleCheckPremission.indeterminateCheckAll"
          @change="handleCheckTaskListPermissionAll"
        ></el-checkbox
        ><br />
        <el-checkbox
          v-model="roleCheckPremission.fieldCheckAll"
          :indeterminate="roleCheckPremission.indeterminateFieldCheckAll"
          label="全部字段编辑权限"
          @change="handleCheckTaskFieldPermissionAll"
        ></el-checkbox
        ><br />
        <template
          v-if="
            roleDetail.permission &&
            roleDetail.permission?.fieldPermission?.length
          "
        >
          <el-checkbox
            v-for="(item, index) in roleDetail.permission.fieldPermission"
            :key="index"
            :label="item.name"
            v-model="item.value"
            @change="handleFieldCheckChange"
          ></el-checkbox>
          <br />
        </template>

        <el-checkbox
          v-model="roleCheckPremission.functionCheckAll"
          :indeterminate="roleCheckPremission.indeterminateFunctionCheckAll"
          label="全部功能权限"
          @change="handleCheckTaskFunctionPermissionAll"
        ></el-checkbox
        ><br />
        <template
          v-if="
            roleDetail.permission &&
            roleDetail.permission?.fieldPermission?.length
          "
        >
          <el-checkbox
            v-for="(item, index) in roleDetail.permission.functionPermission"
            :key="index"
            :label="item.name"
            v-model="item.value"
            @change="handleFieldCheckChange"
          ></el-checkbox>
          <br />
        </template>
      </div>

      <div class="label"><span class="line"></span>视图管理</div>
      <div class="content">待开发</div>
      <div class="label"><span class="line"></span>项目管理</div>
      <div class="content">待开发</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from "vue-router";
  import { ArrowRight } from "@element-plus/icons-vue";
  import { onMounted, ref, reactive } from "vue";
  import PmBreadcrumb from "@/components/PmBreadcrumb.vue";
  import {
    getGlobalProjRole,
    updateGlobalProjRole,
  } from "@/api/pm/globalProjRole.ts";
  import type { globalRoleVo } from "@/interface/pm/globalProjRole.ts";
  import { ElMessage } from "element-plus";
  import { deepCopy } from "@/utils/common.ts";
  const roleDetail = ref<globalRoleVo>({});
  const roleName = ref("");
  const showEditName = ref(false);
  const roleCheckPremission = reactive({
    checkAll: false,
    indeterminateCheckAll: false,
    fieldCheckAll: false,
    indeterminateFieldCheckAll: false,
    functionCheckAll: false,
    indeterminateFunctionCheckAll: false,
  });
  const route = useRoute();

  const handleCheckTaskListPermissionAll = () => {
    roleDetail.value.permission?.fieldPermission?.map((item) => {
      item.value = roleCheckPremission.checkAll;
    });
    roleDetail.value.permission?.functionPermission?.map((item) => {
      item.value = roleCheckPremission.checkAll;
    });
    // roleCheckPremission.checkAll = true;
    roleCheckPremission.indeterminateCheckAll = false;
    roleCheckPremission.fieldCheckAll = roleCheckPremission.checkAll;
    roleCheckPremission.indeterminateFieldCheckAll = false;
    roleCheckPremission.functionCheckAll = roleCheckPremission.checkAll;
    roleCheckPremission.indeterminateFunctionCheckAll = false;
  };

  const handleCheckTaskFieldPermissionAll = () => {
    roleDetail.value.permission?.fieldPermission?.map((item) => {
      item.value = roleCheckPremission.fieldCheckAll;
    });
    handleFieldCheckChange();
  };

  const handleCheckTaskFunctionPermissionAll = () => {
    roleDetail.value.permission?.functionPermission?.map((item) => {
      item.value = roleCheckPremission.functionCheckAll;
    });
    handleFieldCheckChange();
  };

  const handleFieldCheckChange = () => {
    const checkFieldCount =
      roleDetail.value.permission?.fieldPermission?.filter((item) => item.value)
        .length || 0;
    const checkFunctionCount =
      roleDetail.value.permission?.functionPermission?.filter(
        (item) => item.value,
      ).length || 0;
    roleCheckPremission.indeterminateCheckAll = !!(
      checkFieldCount + checkFunctionCount
    );
    const allCount =
      (roleDetail.value.permission?.fieldPermission?.length || 0) +
      (roleDetail.value.permission?.functionPermission?.length || 0);
    roleCheckPremission.checkAll =
      allCount === checkFunctionCount + checkFieldCount &&
      checkFunctionCount > 0 &&
      checkFieldCount > 0;
    roleCheckPremission.indeterminateCheckAll =
      checkFieldCount > 0 && !roleCheckPremission.checkAll;
    roleCheckPremission.fieldCheckAll =
      (roleDetail.value.permission?.fieldPermission?.length || 0) ===
        checkFieldCount && checkFieldCount > 0;
    roleCheckPremission.indeterminateFieldCheckAll =
      checkFieldCount > 0 && !roleCheckPremission.fieldCheckAll;

    roleCheckPremission.functionCheckAll =
      (roleDetail.value.permission?.functionPermission?.length || 0) ===
        checkFunctionCount && checkFunctionCount > 0;
    roleCheckPremission.indeterminateFunctionCheckAll =
      checkFunctionCount > 0 && !roleCheckPremission.functionCheckAll;
  };
  const getRoleSettings = async () => {
    const res = await getGlobalProjRole(route.query.id as string);
    roleDetail.value = res;
    roleName.value = res.name?.zh_CN || "";
    handleFieldCheckChange();
  };
  const handleShowEdit = () => {
    showEditName.value = true;
    roleName.value = roleDetail.value.name?.zh_CN || "";
  };

  const handleEditRoleName = async () => {
    if (!roleName.value) {
      ElMessage({
        type: "warning",
        message: "角色名称不能为空",
      });
      return;
    }
    const params = deepCopy(roleDetail.value);
    if (params.name) {
      params.name.zh_CN = roleName.value;
    }
    await updateGlobalProjRole(params);
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    showEditName.value = false;
    getRoleSettings();
  };
  const saveSetting = async () => {
    await updateGlobalProjRole(roleDetail.value);
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    getRoleSettings();
  };
  onMounted(() => {
    getRoleSettings();
  });
</script>

<style scoped lang="scss">
  .projectType-container {
    display: flex;
    flex-direction: column;
    //padding: 16px;
    height: 100%;
    box-sizing: border-box;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .title {
      font-weight: 500;
      font-size: 18px;
      line-height: 22px;
    }
  }
  .roleSetContainer {
    padding: 20px;

    .topContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      margin-bottom: 20px;
      .roleName {
        display: flex;
        align-items: center;
        .nameShow {
          .avatar {
            width: 20px;
            height: 20px;
          }
          .name {
            font-weight: 600;
            margin: 0 6px;
          }
          .editIcon {
            visibility: hidden;
            cursor: pointer;
          }

          &:hover {
            .editIcon {
              visibility: visible;
            }
          }
        }
        .editName {
          display: flex;
          margin-left: 130px;
        }
      }
    }
    .label {
      color: #1d2129;
      font-weight: 500;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .line {
        display: inline-block;
        width: 5px;
        height: 18px;
        background: #1aa1fb;
        margin-right: 7px;
      }
    }
    .content {
      padding: 16px;
      background: #f6f7fa;
      border-radius: 4px;
      margin-bottom: 20px;
      .content-title {
        color: #1d2129;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
</style>
